<template>
  <div class="timetable-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-table"></i> 教师课表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 统计卡片区域 -->
    <div class="statistics-area">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-date"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ weekScheduleCount }}</div>
          <div class="stat-label">本周课程</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background-color: #67C23A;">
          <i class="el-icon-time"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ todayScheduleCount }}</div>
          <div class="stat-label">今日课程</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon" style="background-color: #E6A23C;">
          <i class="el-icon-location"></i>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ locationCount }}</div>
          <div class="stat-label">上课地点</div>
        </div>
      </div>
    </div>

    <!-- 当前时间提示 -->
    <div class="current-time-info">
      <div class="week-info">
        <i class="el-icon-calendar"></i>
        <span>当前周次：第{{ currentWeek }}周</span>
      </div>
      <div class="day-info">
        <i class="el-icon-alarm-clock"></i>
        <span>{{ currentDate }}</span>
      </div>
    </div>

    <div class="timetable-container">
      <div class="timetable-header">
        <h3><i class="el-icon-fa fa-calendar-check-o"></i> 课程表</h3>
        <div class="timetable-actions">
          <el-button size="small" type="primary" icon="el-icon-printer" @click="printTable">打印课表</el-button>
          <el-tooltip content="刷新数据" placement="top">
            <el-button size="small" icon="el-icon-refresh" circle @click="refreshData"></el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="timetable-body" ref="tableContainer">
        <time-table ref="timeTable"></time-table>
      </div>
      
      <!-- 图例说明 -->
      <div class="timetable-legend">
        <div class="legend-title">图例说明：</div>
        <div class="legend-items">
          <div class="legend-item">
            <div class="legend-color today"></div>
            <div class="legend-text">今日课程</div>
          </div>
          <div class="legend-item">
            <div class="legend-color current"></div>
            <div class="legend-text">当前课程</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/teacher/timetable";
import TimeTable from "../../components/TimeTable";

export default {
  name: "TeacherTimetable",
  components: { TimeTable },
  data() {
    return {
      tableData: [],
      currentWeek: 1,
      weekScheduleCount: 0,
      todayScheduleCount: 0,
      locationCount: 0,
      currentDate: ''
    };
  },
  methods: {
    getData() {
      api.get().then(res => {
        this.tableData = res;
        this.$refs.timeTable.updateData(res);
        this.calculateStatistics(res);
      });
    },
    calculateStatistics(data) {
      // 计算本周课程数
      this.weekScheduleCount = data.length;
      
      // 计算今日课程数
      const today = new Date().getDay();
      const dayIndex = today === 0 ? 6 : today - 1; // 转换星期日为6，其他-1
      this.todayScheduleCount = data.filter(item => {
        const week = parseInt(item.time.split('-')[0]);
        return week === dayIndex + 1;
      }).length;
      
      // 计算上课地点数
      const locations = new Set();
      data.forEach(item => {
        if (item.location) {
          locations.add(item.location);
        }
      });
      this.locationCount = locations.size;
    },
    refreshData() {
      this.getData();
      this.$message.success('课表数据已刷新');
    },
    printTable() {
      const printContent = this.$refs.tableContainer.innerHTML;
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      document.body.appendChild(iframe);
      
      iframe.contentDocument.write(`
        <html>
          <head>
            <title>教师课表打印</title>
            <style>
              body { font-family: Arial, sans-serif; }
              table { width: 100%; border-collapse: collapse; }
              th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
              thead { background-color: #f2f2f2; }
            </style>
          </head>
          <body>
            <h2 style="text-align: center;">教师课表</h2>
            ${printContent}
          </body>
        </html>
      `);
      
      iframe.contentWindow.print();
      
      // 延迟删除iframe
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 100);
    },
    updateCurrentDate() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const date = now.getDate();
      const day = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
      this.currentDate = `${year}年${month}月${date}日 ${day}`;
    }
  },
  created() {
    this.getData();
    this.updateCurrentDate();
    // 计算当前是第几周 (这里可以根据实际业务逻辑修改)
    const startDate = new Date(new Date().getFullYear(), 8, 1); // 假设9月1日为开学日
    const now = new Date();
    const diffTime = Math.abs(now - startDate);
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    this.currentWeek = Math.ceil(diffDays / 7);
  }
};
</script>

<style scoped>
.timetable-wrap {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 100px);
}

.crumbs {
  margin-bottom: 20px;
}

/* 统计卡片样式 */
.statistics-area {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: #409EFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon i {
  font-size: 30px;
  color: #fff;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

/* 当前时间提示样式 */
.current-time-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.week-info, .day-info {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 15px;
}

.week-info i, .day-info i {
  margin-right: 8px;
  color: #409EFF;
  font-size: 18px;
}

/* 课表容器样式 */
.timetable-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.timetable-container:hover {
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

.timetable-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #EBEEF5;
}

.timetable-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
  display: flex;
  align-items: center;
}

.timetable-header h3 i {
  margin-right: 8px;
  color: #409EFF;
}

.timetable-actions {
  display: flex;
  gap: 10px;
}

.timetable-body {
  padding: 10px 0;
}

/* 图例样式 */
.timetable-legend {
  display: flex;
  align-items: center;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px dashed #EBEEF5;
}

.legend-title {
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
}

.legend-items {
  display: flex;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  margin-right: 8px;
}

.legend-color.today {
  background-color: #e6f1fc;
  border: 1px solid #b3d8ff;
}

.legend-color.current {
  background-color: #f0f9eb;
  border: 1px solid #c2e7b0;
}

.legend-text {
  font-size: 12px;
  color: #909399;
}

/* 覆盖TimeTable组件中的表格样式 */
:deep(table) {
  border-collapse: collapse;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

:deep(thead th) {
  background-color: #409EFF !important;
  padding: 12px 8px !important;
  font-size: 14px !important;
  font-weight: bold !important;
}

:deep(tbody td) {
  padding: 10px 8px !important;
  border: 1px solid #ebeef5 !important;
  height: 65px !important;
}

:deep(.course-name) {
  font-size: 14px !important;
  font-weight: 500 !important;
  margin-bottom: 5px !important;
  color: #303133 !important;
  line-height: 1.3 !important;
}

:deep(.teacher-name) {
  font-size: 12px !important;
  color: #409EFF !important;
  margin: 3px 0 !important;
}

:deep(.location-name) {
  font-size: 12px !important;
  color: #909399 !important;
}
</style>
